<template>
    <div class="consultreply">
        <div class="select">
        <span>回复内容 : </span>
        <el-input v-model="input" :style="{width:'200px'}"></el-input>
        <el-button @click="onSubmit" type="primary" icon="el-icon-search" class="search">搜索</el-button>
        </div>
        <br>
        <div class="insert">
        <el-button type="primary" @click="dialogFormVisible = true" class="add">新增回复</el-button>
        <el-dialog title="新增回复信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="新增回复" :label-width="formLabelWidth">
                    <el-input v-model="form.replys" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item  label="问题ID" :label-width="formLabelWidth">
                    <template>
                        <el-select v-model="form.problemid" autocomplete="off" placeholder="请选择">
                            <el-option
                                    v-for="item in problemList"
                                    :key="item.id"
                                    :label="item.id + '(' + item.problemtext + ')'"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

                <el-form-item label="用户ID" :label-width="formLabelWidth">
                    <template>
                        <el-select autocomplete="off" v-model="form.userid" placeholder="请选择">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.id+'('+item.nickname+')'"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>
        </div>

        <!--          表格         -->
        <el-table
                class="table"
                :data="tableData"
                border
                style="width: 100% "
                :cell-style="{textAlign:'center'}"
                :header-cell-style="{'background-color':'#409EFF',color:'#FFF',textAlign:'center'}">
            <el-table-column
                    fixed
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="replytext"
                    label="回复内容">
            </el-table-column>
            <el-table-column
                    prop="problemId"
                    label="问题ID">
            </el-table-column>
            <el-table-column
                    prop="problemTitle"
                    label="问题标题">
            </el-table-column>

            <el-table-column
                    prop="createtime"
                    label="回复时间">
            </el-table-column>
            <el-table-column
                    prop="userId"
                    label="用户ID">
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="用户名字">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope" >
                    <!--                    scope.row 是获取这一行的对象  scope.$index 是当前点击的下标-->
                    <el-button @click="editXiaoquIndex(scope.$index,scope.row)" type="text" size="small" class="add" >编辑</el-button>
                    <el-button type="text" size="small" @click="open(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="编辑回复信息" :visible.sync="dialogForm">
            <el-form :form="form2">
                <el-form-item label="编辑回复" :label-width="formLabelWidth">
                    <el-input v-model="form2.editereplys" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="编辑回复ID"  :label-width="formLabelWidth">
                    <template>
                        <el-select  autocomplete="off"
                                    v-model="form2.editeproblemid"
                                    placeholder="">
                            <el-option
                                    v-for="item in problemList"
                                    :key="item.id"
                                    :label="item.id+'('+item.problemtext+')'"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="编辑用户ID" :label-width="formLabelWidth">
                    <template>
                        <el-select  autocomplete="off"
                                    v-model="form2.editeuserid"
                                    placeholder="">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.id+'('+item.nickname+')'"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm=false">取 消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>

        <!--   分页-->
        <div class="block">
            <el-pagination
                    layout="prev, pager, next"
                    :total="10">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "ConsultReply",
        data() {
            return {
                dialogForm: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                input: '',
                form:{
                    replys:'',
                    problemid:'',
                    userid:''
                },
                form2:{
                    editereplys:'',
                    editeproblemid:'',
                    editeuserid:'',
                },
                tableData: [],
                flag:true,
                scoperow:{},
                userList:{
                    id:'',
                    nickname:''
                },
                problemList:{
                    id:'',
                    problemtext:''
                }
            }
        },
        //页面初始化后执行
        created() {
            this.selectAll();
            this.selectAllUseridUsername();
            this.selectAllProblemidName();

        },

        methods: {
            //获取全部回复数据
            selectAll() {
                this.axios.get("/consultReply/reply/show").then((res) => {
                    console.log(res.data.data)
                    this.tableData = res.data.data;
                }).catch((err) => {
                })
            },

            //获取下拉框的用户id,用户名字
            selectAllUseridUsername(){
                this.axios.get("/consultReply/Reply/selectUseridUsername").then((res)=>{
                    console.log("用户获取成功！！！！！！！！！")
                    this.userList=res.data.data;
                    console.log(res)
                }).catch((err)=>{
                    console.log("用户id名字获取失败！")
                })
            },

            //获取下拉框的问题id,问题名字
            selectAllProblemidName(){
                this.axios.get("/Consultproblem/problems/selectIdTitle").then((res)=>{
                    console.log("问题获取成功！！！！！！！！！")
                    this.problemList=res.data.data;
                    console.log(res)
                }).catch((err)=>{
                    console.log("问题id名字获取失败！")
                })
            },

            //回显数据
            showBackBook() {
                this.form2.editereplys = this.scoperow.replytext;
                this.form2.editeproblemid = this.scoperow.problemId;
                this.form2.editeuserid = this.scoperow.userId;
            },

            //点击编辑按钮
            editXiaoquIndex(index, row) {
                this.scoperow = row;
                this.flag = false;
                this.showBackBook();
                this.dialogForm = true;

            },

            //删除功能
            open(row) {

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.axios.delete("/consultReply/reply/delete", {
                        params: {
                            id: row.id,
                        }
                    }).then(res => {
                        this.selectAll()
                        console.log(res.data)
                        this.tableData = res.data.data;
                    }).catch(err => {
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //搜索
            onSubmit() {
                this.axios.get("/consultReply/reply/like", {
                    params: {
                        replytext: this.input
                    }
                }).then(res2 => {
                    console.log(res2.data)

                    this.tableData = res2.data.data;
                }).catch(err => {
                })

            },

            //新增
            save() {
                if (this.flag) {

                    this.axios.post("/consultReply/reply/insert", {
                        replytext: this.form.replys,
                        problemId: this.form.problemid,
                        createtime: this.getDateString(new Date()),
                        userId: this.form.userid

                    }).then(res2 => {
                        this.selectAll()
                        console.log(res2.data)
                    }).catch(err => {
                    })
                    this.dialogFormVisible = false;
                }
                //回复数据修改走这部分
                this.dialogForm = false;
                this.dialogFormVisible = false;
                let id = this.scoperow.id;
                this.axios.put("/consultReply/reply/update", null, {
                    params: {
                        id: id,
                        createTime: this.getDateString(new Date()),
                        replytext: this.form2.editereplys,
                        problemId: this.form2.editeproblemid,
                        userId: this.form2.editeuserid
                    }
                }).then(res => {
                    this.selectAll()
                    console.log(res.data)
                    this.tableData = res.data.data;
                }).catch(err => {
                });

            },

            //自动获取时间
            getDateString(date) {
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

            },
        }
    }
</script>

<style scoped>
.consultreply{
    height: 800px;
    /*background-color: yellowgreen;*/
    margin:20px 18px 0 18px;
    position: relative;
}
.table{
    margin-top: 30px;
}
.select{
    float: left;
    position: absolute;
    left:0px
}
.insert{
    float: left;
    position: absolute;
    left:400px;
    top:0;
}

</style>